<template>
	<view>
    <view v-for="(item,index) in videoList">
      <view class="tn-flex tn-flex-direction-row tn-margin">
        <view class="tn-flex tn-margin-right">
          <image class="tv-image" :src="item.tv_image|handlePic"/>
        </view>
        <view class="tn-flex tn-flex-direction-column" style="width: 80%">
          <view class="tn-flex dm-margin-top-bottom-xs tn-flex-direction-row tn-flex-row-between">
            <view class="tn-text-bold tn-text-lg">{{ item.tv_name }}</view>
          </view>
          <view class="tn-text-sm dm-margin-top-bottom-xs tn-color-gray--dark tn-text-ellipsis-2">{{item.desc}}</view>
          <view class="tn-flex tn-flex-row-between">
            <view class="tn-flex">
              <tn-button backgroundColor="#FF3D71" height="58rpx" fontColor="tn-color-white" shape="round" @click="toVideoDetail(item)">
                <text class="tn-icon-video-fill tn-margin-right-xs"/>{{isWatchingPage?'观看至'+item.series+'集':'立即观看'}}
              </tn-button>
            </view>

            <!--     追剧按钮       -->
            <view class="tn-flex">
              <tn-button  v-if="item.is_follow" backgroundColor="#EFEFEF" height="58rpx" fontColor="tn-color-gray" shape="round">
                <text class="tn-icon-add-fill tn-margin-right-xs"/>已追
              </tn-button>
              <tn-button v-else backgroundColor="#EFEFEF" height="58rpx" fontColor="tn-color-black" shape="round" @click="followTv(item,index)">
                <text class="tn-icon-add-fill tn-margin-right-xs"/>追剧
              </tn-button>
            </view>

          </view>
        </view>
      </view>
      <view style="height: 10px ;background-color: #EFEFEF"></view>
    </view>
	</view>

</template>

<script>
  import common_mixin from '@/libs/mixin/common_mixin.js'
  import {toast} from "../../utils/utils";

	export default {
		name: "column-video-list",
    mixins: [common_mixin],
		data() {
			return {

			};
		},
		props: ['videoList','isWatchingPage'],
		methods: {
      async followTv(item,index) {
        let params ={
          tv_id:item.tv_id,
        }
        await this.$api.followTv(params);
        toast('追剧成功')
        this.$emit('followSuccess',index)
      }
		}
	}
</script>

<style lang="scss">

.tv_name {
  margin: 4rpx 6rpx;
  font-size: 28rpx;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
